<template>
    <div>
        <div>
            <el-input class="titleInput" size="small" placeholder="请输入文章标题" v-model="publishArticle.title"></el-input>
            <el-select size="small" v-model="publishArticle.cid" placeholder="请选择文章类别">
                <el-option
                        v-for="item in categories"
                        :key="item.id"
                        :label="item.cname"
                        :value="item.id">
                </el-option>
            </el-select>
        </div>
        <div class="main">
            <mavon-editor @change="markdownChange" style="height: 500px" v-model="publishArticle.mdContent"/>
        </div>
        <div class="btnGroup">
            <el-button type="default" @click="saveDraft">保存草稿</el-button>
            <el-button type="primary" @click="savePublish">文章发布</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PublishArticle",
        data(){
            return {
                categories: [], // 文章类别
                publishArticle: { // 文章信息
                    id : -1,
                    title: '', // 文章标题
                    cid: '',// 类别id
                    mdContent : '',
                    hmContent:'',
                    status : - 1,
                }
            }
        },
        methods: {
            editOrNot() {
                if (this.$route.query.id) {
                    this.$getRequest('/article/getArticleById?id='+this.$route.query.id).then(resp => {
                        if (resp) {
                            this.publishArticle.id = resp.id;
                            this.publishArticle.title = resp.title;
                            this.publishArticle.cid = resp.category.id;
                            this.publishArticle.mdContent = resp.mdContent;
                        }
                    })
                }
            },
            saveOrPublishArticle() {
                if (this.publishArticle.id == -1) {
                    this.$postRequest("/article/",this.publishArticle).then(resp => {
                        if (resp) {
                            this.publishArticle.id = resp.data;
                        }
                    })
                }else{
                    this.$putRequest("/article/",this.publishArticle).then(resp => {})
                }
            },
            savePublish() {
                this.publishArticle.status = 1;
                this.saveOrPublishArticle();
            },
            saveDraft() {
                this.publishArticle.status = 2;
                this.saveOrPublishArticle();
            },
            markdownChange(value, render) { // value markdown ,render html
               this.publishArticle.mdContent = value;
               this.publishArticle.hmContent = render;
            },
            initCategories(){ // 查询类别信息
                this.$getRequest('/category/listEnabledCategory').then(resp => {
                    if (resp) {
                        this.categories = resp;
                    }
                })
            }
        },
        mounted() {
            this.initCategories();
            this.editOrNot();
        }
    }
</script>

<style scoped>
    .titleInput{
        width: 350px;
        margin-right: 10px;
    }
    .main{
        margin: 10px 0;
    }
    .btnGroup{
        display: flex;
        justify-content: flex-end;
    }
</style>